<template>
    <div class="page-container">
        <button @click="goBack" v-show="isShow">返回上一页</button>
        <div class="echarts-container" ref="main"></div>
    </div>
</template>

<script>
import getMapName from '../../public/getMapName.js'
export default {
    data() {
        return {
            myEcharts: null,
            isShow:false
        }
    },
    mounted() {
        this.initEcharts()
        // this.getData()
        window.addEventListener('resize',this.screen)
        this.screen()
    },
    destroyed(){
        window.removeEventListener('reset',this.screen)
    },
    methods: {
        // 返回
        goBack(){
            this.myEcharts.dispose()
            this.initEcharts()
            // this.getData()
            this.isShow = false
        },
        // 适配屏幕
        screen(){
            this.myEcharts.resize()
            // 计算一个文字大小的比例
            let width = this.$refs.main.offsetWidth
            let num = width / 100 * 3
            let options = {
                title:{
                    textStyle:{  // 设置主标题样式
                        fontSize:num
                    }
                }
            }
            // 修改图标样式以后要重绘
            this.myEcharts.setOption(options)
        },
        async initEcharts() {
            let main = this.$refs.main
            this.myEcharts = this.$echarts.init(main)
            // 绘制地图的数据（地图的经纬度）
            let mapData = await this.$http('http://localhost:8080/map/china.json')
            this.$echarts.registerMap('china',mapData.data)
            let dataList = await this.$http('/api/CropCoverage')
            /** @type EChartsOption */
            let options = {
                title: {
                    text: '各地区农作物覆盖面积',
                    left:10,
                    top:10
                },
                tooltip: {
                    show: true,
                },
                visualMap:{
                    show:true,
                    calculable:true,  // 是否显示拖动手柄
                    max:400,
                    min:0,
                    color:['#0F3357','#36BFE5']
                },
                series: [
                    {
                        type:'map',
                        map: 'china',
                        zoom: 1.2,   // 地图显示的大小
                        // center: [116.405285, 39.904989]   // 以哪个经纬度为中心点
                        data:dataList.data.content,
                        label: {
                            show: true
                        },
                        left:'15%',
                        right:'15%',
                        top:'10%',
                        bottom: '10%',
                    }
                ],
            }
            this.myEcharts.setOption(options)
            // 给地图绑定一个点击事件
            this.myEcharts.on('click',async (city)=>{
                let cityName = getMapName(city.name)  // 获取到的中文省份名称转换成拼音
                // console.log(cityName);
                if(!cityName.name){return}
                let cityList = await this.$http('http://localhost:8080' + cityName.path)
                this.$echarts.registerMap(cityName.name,cityList.data)
                let options = {
                    series:[
                        {
                            type:'map',
                            map: cityName.name,  
                        }
                    ]
                }
                this.myEcharts.setOption(options)
                this.isShow = true
            })
        },
        // async getData(){
        //     let dataList = await this.$http('/api/CropCoverage')
        //     this.setEcharts(dataList)
        // },
        // setEcharts(dataList){
        //     let options = {
        //         series:[
        //             {
        //                 data:dataList.data.content
        //             }
        //         ]
        //     }
        //     this.myEcharts.setOption(options)
        // }
    }
}
</script>

<style>
button{
    position: absolute;
    top:10px;
    right:10px;
    z-index: 99999;
}
</style>